<template>
	<div>
		<cl-crud @load="onLoad">
			<!-- 筛选 -->
			<template #slot-filter>
				<div class="filter-box">
					<!-- <div class="t">淘宝授权</div> -->
					<el-select
						size="mini"
						filterable
						v-model="select.bindingStatus"
						placeholder="淘宝授权"
						style="width:125px;"
						@change="val => refresh({ bindingStatus: val, page: 1 })"
					>
						<el-option label="全部" value=" "></el-option>
						<el-option label="已授权" :value="1"></el-option>
						<el-option label="未授权" :value="0"></el-option>
					</el-select>
					<!-- <div class="t">是否黑名单</div> -->
					<el-select
						size="mini"
						filterable
						v-model="select.isBlack"
						placeholder="账号状态"
						style="margin-right: 10px;width:125px;margin-left:10px"
						@change="val => refresh({ isBlack: val, page: 1 })"
					>
						<el-option label="全部" value=" "></el-option>
						<el-option label="正常" :value="0"></el-option>
						<el-option label="冻结" :value="1"></el-option>
						<el-option label="白名单" :value="2"></el-option>
					</el-select>
				</div>
			</template>
			<!-- 用户信息 -->
			<template #table-column-userInfo="{scope}">
				<div class="user">
					<img
						v-if="scope.row.headUrl"
						class="user-img"
						:src="scope.row.headUrl | image_ali"
						alt=""
					/>
					<img v-else class="user-img" src="@/assets/images/head_icon.png" alt="" />
					<div style="text-align:left;">
						<div>用户ID：{{ scope.row.userId }}</div>
						<div>用户昵称：{{ scope.row.nickName }}</div>
						<div>手机号码：{{ scope.row.phone || '暂无' }}</div>
						<div>是否新人：{{ scope.row.newPerson == 1 ? '是' : '否' }}</div>
					</div>
				</div>
			</template>
			<template #table-column-os="{scope}">
				<el-tag v-if="scope.row.os === '0'">
					安卓设备
				</el-tag>
				<el-tag v-else-if="scope.row.os === '1'">
					苹果设备
				</el-tag>
				<el-tag v-else>
					未登录
				</el-tag>
			</template>
			<template #table-column-channel="{scope}">
				<span>{{ scope.row.channel | channelUnit }}</span>
			</template>
			<!-- 账号状态 -->
			<template #table-column-status="{scope}">
				<div>
					<span v-if="scope.row.status == 1" style="color:#4DB7F3"> 正常</span>
					<span v-else style="color:#F34D4D"> 禁用</span>
				</div>
			</template>
			<!-- 淘宝授权状态 -->
			<template #table-column-bindingStatus="{scope}">
				<div v-if="scope.row.bindingStatus == 0">未授权</div>
				<div v-else-if="scope.row.bindingStatus == 1">
					<div>{{ scope.row.account }}</div>
					<div>{{ scope.row.tbCreateTime }}</div>
				</div>
			</template>
			<template #table-column-isBlackStatus="{scope}">
				<span v-if="scope.row.isBlack == 0" style="color:#4DB7F3"> 正常</span>
				<span v-else-if="scope.row.isBlack == 1" style="color:#F34D4D"> 冻结</span>
				<span v-else-if="scope.row.isBlack == 2" style="color:#F34D4D"> 白名单</span>
			</template>

			<!-- 操作删除按钮 -->
			<!--			<template #slot-delete="{scope}">-->
			<!--				<delBtn @del="crud.delete(scope.row)"></delBtn>-->
			<!--			</template>-->
			<!-- 操作是否白名单 -->
			<template #slot-permit="{scope}">
				<div class="permit" @click="permitNext(scope.row)">
					<span v-if="scope.row.status == 1" style="color:rgba(241,40,40,1);">
						取消白名单
					</span>
					<span v-else-if="scope.row.status == 0" style="color:rgba(77,243,110,1);">
						设置白名单
					</span>
				</div>
			</template>
			<template #slot-edit="{scope}">
				<editBtn @edit="crud.edit(scope.row)"></editBtn>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import editBtn from '@/components/common/edit-btn';
import platform from '@/mixin/platform';
import stores from '@/utils/store';

export default {
	data() {
		return {
			crud: null,
			mouseDel: true,
			selectRow: [],
			select: {
				filter: '',
				filters: '',
				isBlack: '',
				bindingStatus: ''
			},
			appName:''
		};
	},
	watch: {},
	mixins: [platform],
	components: {
		editBtn
	},
	methods: {
		permitNext(row) {
			this.$service.userMenagement.list
				.update({
					isBlack: row.isBlack == 1 ? 0 : 1
				})
				.then(() => {
					this.$message({
						type: 'success',
						message: '更新成功'
					});
				});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.userMenagement.list)
				.set('table', {
					columns: [
						{
							label: 'ID',
							prop: 'id',
							align: 'center'
						},
						{
							label: '用户信息',
							prop: 'userInfo',
							align: 'center',
							width: 260
						},
						{
							label: '用户设备',
							prop: 'os',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '设备ID',
							prop: 'cid',
							align: 'center',
							'min-width': '250'
						},
						{
							label: '余额',
							prop: 'balance',
							align: 'center',
							sortable: 'custom',
							'min-width': '100'
						},
						{
							label: '已提现',
							prop: 'withdrawTotal',
							align: 'center',
							sortable: 'custom',
							'min-width': '100'
						},
						{
							label: '历史总收益',
							prop: 'incomeTotal',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '是否授权淘宝',
							prop: 'bindingStatus',
							align: 'center',
							'min-width': '150'
						},
						{
							label: '渠道',
							prop: 'channel',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '用户状态',
							prop: 'status',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '黑名单状态',
							prop: 'isBlackStatus',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							'min-width': '150',
							sortable: 'custom'
						},
						{
							label: '最后登录时间',
							prop: 'lastLoginTime',
							align: 'center',
							'min-width': '150',
							emptyText: '无',
							sortable: 'custom'
						},
						{
							label: '最后访问时间',
							prop: 'lastVisitTime',
							align: 'center',
							'min-width': '150',
							sortable: 'custom'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						title: '用户修改',
						center: true,
						'custom-class': 'custom-class-dialog-mini',
						width: '500px'
					},
					items: [
						// {
						// 	label: '头像',
						// 	prop: 'headUrl',
						// 	component: {
						// 		name: 'cl-upload'
						// 	}
						// },
						{
							label: '昵称',
							prop: 'nickName',
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '请输入昵称'
							}
						},
						{
							label: '手机号',
							prop: 'phone',
							component: {
								name: 'el-input',
								attrs: {
									maxlength: 11
								}
							},
							rules: {
								required: true,
								message: '请输入手机号'
							}
						},
						{
							label: '余额',
							prop: 'balance',
							component: {
								name: 'el-input',
								props: {
									min: 0
								}
							},
							rules: {
								required: true,
								message: '余额不能为空'
							}
						},
						{
							label: '启用状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						},
						{
							label: '是否黑名单',
							prop: 'isBlack',
							component: {
								name: 'el-switch'
							}
						},
						{
							label: '是否新人',
							prop: 'newPerson',
							component: {
								name: 'el-switch'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea',
									row: 3
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.appName = stores.get('platForm') || 'yzf';

					if (params.isBlack === ' ') {
						delete params.isBlack;
					}
					if (params.bindingStatus === ' ') {
						delete params.bindingStatus;
					}
					let { list } = await next(params);
					list.map(e => {
						e.balance = '￥' + e.balance;
						e.withdraw = '￥' + e.withdraw;
					});
				})
				.on('open', async (isEdit, data) => {
					if (isEdit) {
						this.crud.setForm('status', data.status == 1 ? true : false);
						this.crud.setForm('isBlack', data.isBlack == 1 ? true : false);
						this.crud.setForm('newPerson', data.newPerson == 1 ? true : false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let { nickName, phone, balance, id } = data;
						let status = data.status ? '1' : '0';
						let isBlack = data.isBlack ? '1' : '0';
						let newPerson = data.newPerson ? '1' : '0';
						next({
							nickName,
							phone,
							balance,
							id,
							status,
							isBlack,
							newPerson,
							app: stores.get('platForm') || 'yzf'
						});
					}
				})
				.done();

			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	},
	filters: {
		channelUnit(val) {
			switch (val) {
				case 'drsj1':
					return '多肉商家1';
				case 'dryc':
					return '多肉云仓';
				case 'dryh':
					return '多肉用户';
				case 'dymkf':
					return '抖音麦克风';
				case 'other':
					return '自然流量';
				case 'ycfs':
					return '云仓粉丝';
				case 'rwll':
					return '任务流量';
				case 'xiaomi':
					return '小米';
				case 'vivo':
					return 'VIVO';
				case 'oppo':
					return 'OPPO';
				case 'huawei':
					return '华为';
				case 'yyb':
					return '应用宝';
				case 'douyin':
					return '抖音';
				case 'guanwang':
					return '官网';
				case 'ios':
					return 'AppStore';
				case 'kmi':
					return 'K米';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.permit {
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	:hover {
		opacity: 0.7;
	}
}
::v-deep .el-button--danger.is-disabled {
	background: rgba(241, 76, 40, 0.5);
	&:hover {
		opacity: 1;
	}
}

// ::v-deep .el-button--danger.is-disabled {
// 	background: rgba(241, 76, 40, 0.5);
// }

.user {
	display: flex;
	align-items: center;
	.user-img {
		min-width: 64px;
		height: 64px;
		margin-right: 20px;
	}
}
.filter-box {
	color: #8a9199;
	font-size: $font14;
	@include flexBox();
	.el-select {
		margin-left: 10px;
	}
}
</style>
